<template>
<div class='home'>
     <cube-slide
     
      ref="mainPageBanner"
      :data="items"
    
    >
      <cube-slide-item
      
        v-for="(item, index) in items"
        :key="index"
      
      >
        <a :href="item.url" class="mainPageHref">
          <img :src="item.img" />
        </a>
      </cube-slide-item>
    </cube-slide>

    <cube-slide
    :auto-play="false"
     :showDots='false'
      ref="categorySlide"
      :data="categorySlide"
    
    >
      <cube-slide-item
        v-for="(list,listIndex) in categorySlide"
        :key="listIndex"
      
      >
          <ul class="categoryList">
            <li v-for="(item,index) in list" :key="index">
              <img :src="item.image" />
              <p>{{item.label}}</p>
              
            </li>
          </ul>

       
      </cube-slide-item>
    </cube-slide>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
    items: [],
    categorySlide: [
       [
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
             {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
          ],
      
        [
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
            {
              url: "http://www.didichuxing.com/",
              image:
                "https://tse1-mm.cn.bing.net/th/id/R-C.7c73113eb40a4c29c55e7106ccce7c2f?rik=v12bX2fDCRh7Bg&riu=http%3a%2f%2fpic3.nipic.com%2f20090625%2f2850268_010055704_2.jpg&ehk=5EulBEyBatfekrbP4gVOvzxCvDUJi5BXLpSfpzJI%2f9E%3d&risl=&pid=ImgRaw&r=0",
              label: "类目",
            },
          ]
      
      ],

  };
  },
methods: {

  },
  mounted() {

  },
    created() {
    //创建时就请求服务器,将数据拿到，再渲染到组件中
    this.$http
      .getRequest(
        "https://www.fastmock.site/mock/3d965a746c0526a1c73b62769ed6bc03/api/picture"
      )
      .then((res) => {
        this.items = res.data;
      
      })
      .catch((err) => {
        ''(err);
      });
  },
}
</script>
<style lang='stylus' scoped>
.home {
  .mainPageHref {
    img {
      width: 100%;
      height: 150px;
    }
  }
  .categoryList 
  ul{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    margin-top:10px;
  li {
    width:20%;
    margin-top:10px;
    p{
      font-size:14px;
    }
    img{
      width:40px;
      height: 40px;
      border-radius:50%
    }
  }
  }
}
</style>